/**
 * @Date 2023-02-23 15:59:03
 * @Remark
 */

// react
import React from "react";
// lib
import { Modal, Form, Input } from "antd";
// config
import { PWD_LENGTH_RULE } from "project/validRules";
import { REQUIRED_RULE } from "utils/validator";
// store
import { observer } from "mobx-react";
import { state } from "./state";
// controller
import { resetAdminPwd } from "./controller";
import toast from "components/toast";

function PwdModal() {
  const [form] = Form.useForm();

  const title = "修改密码";
  const show = state.PwdModalShow;

  const handleCancel = () => {
    form.resetFields();
    state.pwdModal = false;
  };

  const handleOk = async () => {
    try {
      const result = await form.validateFields();
      const { newPwd, conPwd } = result;
      if (newPwd !== conPwd) return toast.error("两次密码输入不一致！");
      if (state.pwdModalInfo?.userId) {
        resetAdminPwd(newPwd, state.pwdModalInfo.userId);
      }
    } catch (error) {
      //
    }
  };

  return (
    <Modal
      forceRender
      title={title}
      open={show}
      onCancel={handleCancel}
      onOk={handleOk}
      okButtonProps={{
        loading: state.pwdModalLoading,
      }}
    >
      <Form name="PwdModalForm" form={form}>
        <Form.Item
          name="newPwd"
          label="新密码"
          labelCol={{ span: 5 }}
          rules={[REQUIRED_RULE("请填写新密码"), PWD_LENGTH_RULE]}
        >
          <Input.Password
            placeholder="请填写新密码"
            maxLength={PWD_LENGTH_RULE.max}
            allowClear
          />
        </Form.Item>
        <Form.Item
          name="conPwd"
          label="确认密码"
          labelCol={{ span: 5 }}
          rules={[REQUIRED_RULE("请再次输入新密码"), PWD_LENGTH_RULE]}
        >
          <Input.Password
            placeholder="请再次输入新密码"
            maxLength={PWD_LENGTH_RULE.max}
            allowClear
          />
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default observer(PwdModal);
